/*首页*/
<template>
  <div class="home background" :style="{height: `${screenHeight}px`}">
    <mt-loadmore v-if="listData.length>0" 
      ref="loadmore"
      :bottom-method="loadBottom" 
      :bottomDistance="0"
      :autoFill="false" 
      bottomDropText=""
      bottomLoadingText=""
      :bottom-all-loaded="allLoaded">
      <ul>
        <!-- v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"> -->
        <li class="home-list" v-for="item in listData" :key="item.id">
          <router-link :to="{ path:'/activityDetail', query: { id: item.id}}">
          <div class="home-list-img">
           <img :src="item.image || defaultImg">
          </div>
          <div class="home-list-content">
              <p>{{item.title || '未设置活动名称'}}</p>
              <p class="home-list-content-text"><img src="@/assets/img/peoples@2x.png"><span style="font-size:14px;">人数:{{item.joinNumber || 0}}/{{item.maxNumber || 0}}</span> <span style="color:red;margin-left:10px;">￥{{item.cost || 0}}</span>
                <span v-if="item.state == 'IN_PROGRESS'" class="home-list-content-text-btn home-list-content-text-btn-active">进行中</span>
                <span v-if="item.state == 'UN_START'" class="home-list-content-text-btn">未开始</span>
                <span v-if="item.state == 'FULL'" class="home-list-content-text-btn">已满员</span>
                <span v-if="item.state == 'END'" class="home-list-content-text-btn">已结束</span>
                <span v-if="item.state == 'CLOSE'" class="home-list-content-text-btn">已关闭</span>
              </p>
          </div>
           </router-link>
        </li>
        <span style="font-size:12px;color:#bbb;position:relative;top:-10px;" v-if="!allLoaded">上拉加载更多↑</span>
        <span style="font-size:12px;color:#bbb;position:relative;top:-10px;" v-if="allLoaded && listData.length>5">—— 你触及到我的底线啦~ ——</span>
      </ul>
      </mt-loadmore>
      <div v-else class="home-no-list">
        <img  src="@/assets/img/no_activity.png">
      </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { getActivityData } from '@/api/request.js';
import { setStore,getStore  } from '@/assets/js/utils.js';
import defaultImg from '@/assets/img/no_img.png';
import { Loadmore } from 'mint-ui'; //滚动组件

export default {
  name: 'home',
  data() {
    return {
      defaultImg:defaultImg,
      allLoaded:false, //是否加载更多
      listData:[],
      page:1
    }
  },
  computed: {
      screenHeight () {
        return window.innerHeight-40-55;
      }
  },
  created(){
    let userId = getStore('userId');
    let user = getStore('user');
    if(userId && user){
      this.userId = userId;
      this.user = user;
    }else{
      //跳转登录
      var fhUrl = window.location.href;
      setStore('fhUrl', fhUrl);
      this.$router.push('/wxLogin')
    }
  },
  mounted() {
    this.$store.commit('UPDATE_PAGE_TITLE', '活动列表')
    this.$store.commit('UPDATE_HEAD', true)
    this.$store.commit('UPDATE_BACKSHOW', false)
    this.$store.commit('UPDATE_FOOTER', true)
    this.loadBottom();
  },
  methods: {
    //下拉获取活动列表数据
    loadBottom() {
      let that = this;
      getActivityData(this.page).then(res => {
        if (res.code == 1) {
          that.page++;
          console.log('res',res.data);
          that.listData.push.apply(that.listData,res.data); 
          if(res.data.length<10){
              that.allLoaded = true; // 数据已全部获取完毕
          }
        }
        that.$refs.loadmore.onBottomLoaded();
      }).catch(err => console.log(err)) 
    }
  },
  components: {
    "mt-loadmore":Loadmore
  }
}
</script>
<style scoped lang="scss">
 .home{
   padding:45px 10px 50px 10px;
   height:100%;
   &-list{
     background-color:white;
     margin:10px 0px;
     border-radius:10px;
     padding: 10px 0px 10px 10px;
     overflow: auto;
     box-sizing: border-box;
     &-img{
       float: left;
       width: 25%;
       img{
        width: 80px;
        height:80px;
       }
     }
     &-content{
       text-align: left;
       float: left;
       margin-left: 20px;
       width: 67%;
       &-text{
         position: relative;
         white-space:nowrap;
         overflow: hidden;
         bottom: -32px;
         img{
          width:16px;
          margin-top: 2px;
         }
         &-btn{
           background-color:#ccc;
           color:white;
           border-radius: 10px;
           padding:3px 8px;
           float: right;
         }
         &-btn-active{
           background-color: #FEBF00;
         }
       }

     }
   }
   &-no-list{
     overflow:hidden;
     img{
       width:40%;
       padding:30%;
       height:100%;
     }
   }
 }
</style>
